<template>
  <div>
    <ul>
      <li v-for="(i, item) in arr" :key="item" :class="objClass">{{ i }}</li>
    </ul>
    <li v-for="(i, item) in arr" :key="item" :class="[mz, ky]">{{ i }}</li>
    <!-- 变量可以代替 class名字 用数组 -->
    <p :class="[isActive ? 'active' : 'pan']">123</p>
    <!-- 需要用class类名 -->
    <div class="hezi" :style="{ width: big + 'px' }" @click="bian">+++</div>
    <!-- 正常样式: -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [666, 777],
      objClass: {
        active: true, // true / false
        pan: true,
      },
      mz: "active", // 类名
      ky: "pan",
      isActive: false,
      big: 50,
    };
  },
  methods: {
    bian() {
      this.big = this.big + 50;
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
.active {
  background: pink;
}
.pan {
  font-size: 20px;
}
.hezi {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
}
</style>
